<style media="screen">
  .business-follow-list-item{
    border-bottom: 1px solid #e5e5e5;
  }
  .business-follow-list-item:last-child{
    border-bottom: none;
  }
  .head-container{
    position: relative;
    padding: 10px 0 14px;
    border-bottom: 1px solid #E3E3E5;
  }
  .head-container .mes{
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }
  .head-container .mes p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .mes input{
    width: 260px;
    height: 34px;
  }
  .head-container .flow{
    float: left;
    margin-right: 10px;
  }
  .head-container .flow p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .flow .flow-select{
    width: 140px;
    height: 34px;
  }
  .head-container .button-group{
    padding-top: 23px;
  }

	.table-type-wrap {
	    width: 102px;
	    display: none;
	    position: absolute;
	    right: 20px;
	    top: -30px;
	    background-color: #fff;
	    border-radius: 4px;
	    box-shadow: 0 0 4px rgba(214,214,214,.75);
	}
	.table-type-wrap:before {
	    display: block;
	    content: '';
	    border-width: 8px 8px 8px 8px;
	    border-style: solid;
	    border-color: transparent transparent transparent #fff;
	    position: absolute;
	    left: 102px;
	    top: 40%;
	}
	.table-type-wrap li {
	    padding: 0 6px;
	    height: 24px;
	    line-height: 24px;
	    color: #5e67a5;
	    cursor: pointer;
			text-align: left;
	}
	.table-type-wrap li.active {
	    background-color: #f2f2f2;
	}

	.init-hover:hover .init-tips1, .init-hover:hover .init-tips2 {
	    display: block;
	}

	.init-tips1 {
	    display: none;
	    width: 240px;
	    position: absolute;
	    left: 50%;
	    top: 28px;
	    background: #fff;
	    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
	    transform: translate(-50%, 0);
	    padding: 10px;
	    border-radius: 4px;
			word-wrap:break-word !important;
			white-space:normal;
			line-height: 18px;
			z-index: 999;
	}

	.init-tips1:before {
	    content: '';
	    position: absolute;
	    left: 50%;
	    transform: translate(-50%, 0);
	    top: -16px;
	    width: 0;
	    height: 0;
	    border-width: 8px;
	    border-style: solid;
	    border-color: transparent transparent #fff transparent;
	}
	.init-tips2 {
	    display: none;
	    width: 240px;
	    position: absolute;
	    right: 100%;
	    top: 50%;
	    background: #fff;
	    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
			transform: translate(0, -50%);
	    padding: 0 10px;
	    border-radius: 4px;
			word-wrap:break-word !important;
			white-space:normal;
			line-height: 33px;
			z-index: 999;
	}

	.init-tips2:before {
	    content: '';
	    position: absolute;
	    right: -14px;
	    transform: translate(0, -50%);
	    top: 50%;
	    width: 0;
	    height: 0;
	    border-width: 8px;
	    border-style: solid;
	    border-color: transparent transparent transparent #fff;
	}
	.extension-wrap:hover .table-type-wrap {
			display: block;
		}
		.config-table-wrap:hover {
			overflow-x: scroll;
		}

		.text-hover-top {
		      position: absolute;
		      width: 200px;
		      padding: 15px;
		      background-color: #fff;
		      z-index: 9;
		      color: #999;
		      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		      border-radius: 4px;
		      line-height: 24px;
					word-wrap:break-word
		  }

		  .text-hover-top::before {
		      content: '';
		      position: absolute;
		      left: 50%;
		      top: -10px;
		      width: 0;
		      height: 0;
		      border-width: 0 10px 10px;
		      border-style: solid;
		      border-color: transparent transparent #fff;
		      transform: translate(-50%, 0);
		  }
			.calendar_container{
				width: 130px;
			}
</style>

<section class="pl-24 pr-24" id="customerFollow" @click="hideRpersonList">
  <hl-page-header title="客户跟进管理"></hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input
            autocomplete="off"
            type="text"
            class="global_ipt_text"
            placeholder="主题/目标客户/联系人/联系电话/创建人"
            v-model="keyWord"
           />
        </div>
      </div>
      <div class="flow">
        <p>对接人</p>
        <div class="pull-left line-height-34 relative" >
          <input type="text" placeholder="全部" class="global_ipt_text" autocomplete="off" style="width:120px;" v-model="rpersonKeyword"  @input="getRpersonData"/>
          <ul class="append-temp absolute bg-fff border z-998 line-height-34" style="left:0; top:35px; max-height:200px; overflow-y:scroll; width: 100%; text-indent:0.8em;" v-if="rperson.list.length > 0">
            <li v-for="item in rperson.list" :key="item.userId" class="clearfix" @click="setRperson(item.name, item.id)">
              <span class="pull-left">{{item.name}}</span>
              <span class="pull-right">{{item.phone}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="flow">
        <p>跟进时间</p>
        <div class="pull-left dy-flex" style="align-items: center">
					<div class="calendar_container">
						<web-calendar  v-model="beginDate" :afterdate="endDate" tips="起始时间"></web-calendar>
					</div>
					<span style="margin:0 10px">-</span>
					<div class="calendar_container">
						<web-calendar  v-model="endDate" :beforedate="beginDate" tips="截止时间"></web-calendar>
					</div>
        </div>
      </div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="mt-10 clearfix" v-show="isExtenseFlag">
      <div class="flow">
        <p>渠道分类</p>
				<hl-select :data="channelType" v-model="selectedChannelType" width="120" @on-change="selectChannelType"></hl-select>

      </div>
      <div class="flow">
        <p>渠道名称</p>
				<hl-select :data="channelName" v-model="selectedChannelName" width="120" @on-change="selectChannelName"></hl-select>

      </div>
      <div class="flow">
        <p>所属行业</p>
				<hl-select :data="industryType" v-model="selectedIndustryType" width="120" @on-change="selectIndustryType"></hl-select>

      </div>
      <div class="flow">
        <p>客户状态</p>
				<hl-select :data="customerStatuList" v-model="selectedCustomerStatu" width="120" @on-change="selectCustomerStatu"></hl-select>

      </div>
      <div class="flow">
        <p>客户类型</p>
				<hl-select :data="customerType" v-model="selectedCustomerType" width="120" @on-change="selectCustomerType"></hl-select>

      </div>
      <div class="flow">
        <p>黑名单</p>
				<hl-select :data="blackData" v-model="selectedBlackType" width="120" @on-change="selectBlackType"></hl-select>

      </div>
    </div>

    <div class="clearfix" v-show="isExtenseFlag">
      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:290px"></span>
  </div>

  <!-- //开始 -->
  <section class="config-table-container global_table absolute" style="margin:0 0 10px 0;border:1px solid #E5E5E5;">
  	<div class="extension-wrap absolute z-50 cursor text-center" style="right: 0; top: 10px;width: 20px;background-color: #f0f2ff;">
  		<i class="icon-predict-more extension-icon color-999"></i>
  		<ul class="table-type-wrap">
  			<li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
  			<li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
  			<li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span class="icon icon-Gm-edit"
  				 @click="showTableLayer"></span></li>
  		</ul>
		</div>
  	<!-- 内容表格 -->
  	<div class="config-table-wrap clearfix" :class="{'config-table-scroll':isScroll}" ref="scrollLeft" style="margin-right: 0px;">
  		<div :style="tbTitleWidth">
  			<div class="config-table-title-wrap dy-flex">
  				<div :style="{width: isNaN(leftWidth) ? '50%' : leftWidth + 'px'}" class="dy-flex">
  					<!-- //完整 -->
  					<div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'WZ'" @click=" sortBySTTime(item)"
  					 :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
  					 v-for="(item,index) in leftTableArr">
  						<span>{{ item.name }}</span>
  						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
  						 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
  						</span>
  					</div>
  					<!-- //简单 -->
  					<div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'JD' && item.baseFlag == 'Y'"
  					 @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
  					 v-for="(item,index) in leftTableArr">
  						<span>{{ item.name }}</span>
  						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
  						 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
  						</span>
  					</div>
  					<!-- //配置 -->
  					<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'PZ' && item.customShowFlag == 'Y'"
  					 @click=" sortBySTTime(item)" :style="{'text-align': item.value == 'memo' ? 'left' : 'center'}"
  					 v-for="(item,index) in leftTableArr">
  						<span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
  						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
  						 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
  						</span>
  					</div>
  				</div>
  				<div :style="{width: isNaN(rightWidth) ? '50%' : rightWidth + 'px'}" class="dy-flex">
  					<!-- //完整 -->
  					<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'WZ'" @click=" sortBySTTime(item)"
  					 :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
  					 v-for="(item,index) in rightTableArr">
  						<span>{{ item.name }}</span>
  						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
  						 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
  						</span>
  					</div>
  					<!-- //简单 -->
  					<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'JD' && item.baseFlag == 'Y'"
  					 @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
  					 v-for="(item,index) in rightTableArr">
  						<span>{{ item.name }}</span>
  						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
  						 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
  						</span>
  					</div>
  					<!-- //配置 -->
  					<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'PZ' && item.customShowFlag == 'Y'"
  					 @click=" sortBySTTime(item)" :style="{'text-align': item.value == 'memo' ? 'left' : 'center'}"
  					 v-for="(item,index) in rightTableArr">
  						<span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
  						<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
  						 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
  							<span class="path1"></span><i class="path2"></i>
  						</span>
  					</div>
  				</div>
  			</div>

  			<div class="config-table-content-wrap" style="overflow: initial;">

  				<ul v-for="(item,index) in listData" class="global_table_item clearfix" style="overflow: initial;height: auto;">
  					<li style="overflow: initial;" :style="{height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px', width: isNaN(leftWidth) ? '50%' : leftWidth + 'px'}">
  						<div class="dy-flex" :class="{'border-t': index0 > 0}" v-for="(item0, index0) in item.followupRecords">

  							<!-- //完整 -->
  							<div class="pull-left relative" :style="{'width':item1.styleWidth + 'px'}" v-if="configType == 'WZ'" v-for="(item1,index1) in leftTableArr">
  								<span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
  								<span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
  								<div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
  									<a href="javascript:;">详情</a>
  								</div>
  							</div>
  							<!-- //简单 -->
  							<div class="pull-left relative clearfix" :style="{'width':item1.styleWidth + 'px'}" v-if="configType == 'JD' && item1.baseFlag == 'Y'"
  							 v-for="(item1,index1) in leftTableArr">
  								<span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
  								<span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
  								<div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
  									<a href="javascript:;">详情</a>
  								</div>
  							</div>
  							<!-- //自定义 -->
  							<div class="pull-left relative clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'PZ' && item1.customShowFlag == 'Y'"
  							 v-for="(item1,index1) in leftTableArr">
  								<span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
  								<span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
  								<div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
  									<a href="javascript:;">详情</a>
  								</div>
  							</div>
  						</div>
  					</li>
  					<li class="border-l" style="overflow: initial;display: flex;align-items: center;" :style="{width: isNaN(rightWidth) ? '50%' : rightWidth + 'px', height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px'}">
  						<div class="dy-flex" style="width: 100%;">
  							<!-- //完整 -->
  							<div class="pull-left ellipsis-1" :class="'dy-fx-'+item1.flex" v-if="configType == 'WZ'" v-for="(item1,index1) in rightTableArr">
  								<span>{{item[item1.value] | formatUndefinedFB}}</span>
  							</div>
  							<!-- //简单 -->
  							<div class="pull-left ellipsis-1 clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'JD' && item1.baseFlag == 'Y'"
  							 v-for="(item1,index1) in rightTableArr">
  								<span>{{item[item1.value] | formatUndefinedFB}}</span>
  							</div>
  							<!-- //自定义 -->
  							<div class="pull-left ellipsis-1 clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'PZ' && item1.customShowFlag == 'Y'"
  							 v-for="(item1,index1) in rightTableArr">
  								<span>{{item[item1.value] | formatUndefinedFB}}</span>
  							</div>
  						</div>
  			</div>
  			</li>
  			</ul>
  		</div>
  	</div>
  	</div>
   <div class="text-hover-top" v-if="texthover" :style="{left:lefthover, top:tophover}">{{textLong}}</div>
  </section>

  <!-- 自定义列表项弹出层 -->
  <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
  	<div class="head-pop font-16"><span>自定义列</span>
  		<button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
  	</div>
  	<div class="content-pop">
  		<div class="content text-center">
  			<ul class="title-wrap">
  				<li class="dy-fx-1 text-left">名称</li>
  				<li class="dy-fx-2">自定义名称</li>
  				<li class="dy-fx-1">状态</li>
  			</ul>
  			<div class="ctx-wrap" id="sortableTable">
  				<ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)"
  				 @mouseleave="removehighLightTitleItem(item,index)">
  					<li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
  					<li class="dy-fx-1 name">{{item.name}}</li>
  					<li class="dy-fx-2">
  						<input type="text" class="form-control" v-model="item.customDisplayName">
  					</li>
  					<li class="dy-fx-1 ">
  						<span class="show-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }"
  						 @click="selectedTitleItem(index)">显示</span>
  						<span class="hide-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }"
  						 @click="cancelSelectedTitleItem(index)">隐藏</span>
  					</li>
  				</ul>

  			</div>
  		</div>
  	</div>
  	<div class="fw-button">
  		<hl-button type="primary" @on-click="confirmSubmitTable">确定</hl-button>
  		<hl-button type="outline" @on-click="closeTableLayer">取消</hl-button>
  	</div>
  </div>

  <!--遮罩-->
  <div class="backdrop" v-if="isShowTableLayer"></div>
  <!-- end -->

  <div class="user-page ptb-10 border-b clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="searchData"></hl-pagination>
    </div>
  </div>

  <div class="ptb-10">
    <hl-button type="outline" @on-click="exportExcel">导出</hl-button>
  </div>

</section>

<script src="modules/customer/scripts/customer_follow.js" charset="utf-8"></script>
